<template>
  	<div>
  		<div class="main-body">
  			<h3 class="main-body__title text-left">
  				订单记录
  			</h3>
  			<div class="main-body__content">
  				<div class="order-select text-left">
  					<div class="row">
  						<div class="col-md-6">
  							<div class="order-select__item order-select__time">
	  							<p class="order-select__title">创建订单时间</p>
	  							<div class="row">
	  								<div class="col-sm-6">
                      <datepicker placetext="选择开始时间" v-model="start_time"></datepicker>
                      <!-- <input type="text" v-timepicker="start_time" placeholder="请选择开始时间" class="form-control"> -->

	  								</div>
	  								<div class="col-sm-6">
                      <datepicker placetext="请选择结束时间" v-model="end_time"></datepicker>
	  								</div>
	  							</div>
	  						</div>
  						</div>
  						<div class="col-md-3">
  							<div class="order-select__item order-select__time">
  								<p class="order-select__title">选择交易状态</p>
	  							<div class="form">
                    <select2 :options="tradeStateOptions" v-model="tradeState">
                        <option disabled value="0">交易状态</option>
                    </select2>
	  							</div>
  							</div>
  						</div>
  						<div class="col-md-3">
  							<div class="order-select__item order-select__time">
  								<p class="order-select__title">选择通知状态</p>
	  							<div class="form">
                      <select2 :options="noticeStateOptions" v-model="noticeState">
                          <option disabled value="0">通知状态</option>
                      </select2>
	  							</div>
  							</div>
  						</div>
            </div>
            <div class="row">
  						<div class="col-md-3">
  							<div class="order-select__item order-select__time">
  								<p class="order-select__title">选择结算状态</p>
	  							<div class="form">
                    <select2 :options="balanceStateOptions" v-model="balanceState">
                          <option disabled value="0">结算状态</option>
                      </select2>
	  							</div>
  							</div>
  						</div>
  						<div class="col-md-3">
  							<div class="order-select__item order-select__time">
  								<p class="order-select__title">选择支付方式</p>
	  							<div class="form">
                    <select2 :options="payTypeOptions" v-model="payType">
                          <option disabled value="0">支付方式</option>
                      </select2>
	  							</div>
  							</div>
  						</div>
  						<div class="col-md-3">
  							<div class="order-select__item order-select__time">
  								<p class="order-select__title">查询订单流水号</p>
	  							<div class="form">
		  							<input type="text" placeholder="查询订单流水号" class="form-control">
	  							</div>
  							</div>
  						</div>
  						<div class="col-md-3">
  							<div class="order-select__item order-select__time">
  								<p class="order-select__title">查询商户订单编号</p>
	  							<div class="form">
		  							<input type="text" placeholder="查询商户订单编号" class="form-control">
	  							</div>
  							</div>
  						</div>
  					</div>
  				</div>
  				<div class="order-show">
  					<table class="text-left table table-bordered">
  						<thead>
  							<tr>
  								<th>创建时间</th>
  								<th>商户订单编号</th>
  								<th>订单流水号</th>
  								<th>交易金额（元）</th>
  								<th>交易状态</th>
  								<th>支付方式</th>
  								<th>通知状态</th>
  								<th>手续费</th>
  								<th>操作</th>
  							</tr>
  						</thead>
  						<tbody>
  							<tr>
  								<td>2014-10-10 22：00：22</td>
  								<td>123456789021345</td>
  								<td>123456789021345</td>
  								<td>100000000</td>
  								<td>成功</td>
  								<td>支付宝wap</td>
  								<td>成功</td>
  								<td>10</td>
  								<td>
  									<a data-toggle="modal" data-target="#order-modal">查看</a>
  								</td>
  							</tr>
  						</tbody>
  					</table>
  					<page></page>
  				</div>
  			</div>
  		</div>
  		<orderModal></orderModal>
  	</div>
</template>
<script>

	import page from './page'
	import orderModal from './order-modal'
  import select2 from './select2'
  import datepicker from './datepicker'

  export default {
    name:'order',
    data(){
      return {
        tradeState:0,
        tradeStateOptions:[
          {id:1,text:'完成'},
          {id:2,text:'未完成'},
          {id:3,text:'失败'}
        ],
        noticeState:0,
        noticeStateOptions:[
          {id:1,text:'未通知'},
          {id:2,text:'已通知'}
        ],
        balanceState:0,
        balanceStateOptions:[
          {id:1,text:'未结算'},
          {id:2,text:'已结算'}
        ],
        payType:0,
        payTypeOptions:[
          {id:1,text:'支付宝'},
          {id:2,text:'微信'}
        ],
        start_time:'',
        end_time:''
      }
    },
    watch:{
      start_time:function(){
      },
      end_time:function(){
      }
    },
    components:{
    	page,
    	orderModal,
      select2,
      datepicker
    }
  }
</script>
<style lang="less">
  	
  	@import '../../assets/style/color';
	@import '../../assets/style/font';

	.main-body__content{
		padding-top:0;
	}
	.order-select {
		margin-top:-20px;
		margin-bottom:40px;
		.order-select__item{
			>.order-select__title{
				line-height: 54px;
				font-size:12px;
				color:@cl_444;
				>small{
					font-size:12px;
					color:@cl_999;
				}
			}
		}
	}
	.order-show{
		height: 553px;
		position: relative;
		.table > tbody > tr > td{
			&:nth-of-type(5){
				color:@cl_2b98f0;
			}
			&:nth-of-type(7){
				color:@cl_2b98f0;
			}
			&:nth-of-type(8){
				color:@cl_2b98f0;
			}
			&:nth-of-type(9){
				color:@cl_2b98f0;
			}
		}
	}
</style>